<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title></title>
  <link rel="icon" href="favicon.ico" type="image/ico">
  <meta name="keywords" content="LightYear,,后台模板,后台管理系统,光年HTML模板">
  <meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
  <meta name="author" content="yinqi">
  <link href="/css/bootstrap.min.css" rel="stylesheet">
  <link href="/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="/css/style.min.css" rel="stylesheet">
  <!--对话框-->
  <link rel="stylesheet" href="/js/jconfirm/jquery-confirm.min.css">
  <style>
    .input-with-icon {
      position: relative;
      padding-left: 20px;
      top: -5px;
      display: inline-block;
      vertical-align: middle;
      /* 确保这个div与其他行内元素垂直对齐 */
    }

    .input-with-icon input.btn-default {
      padding-left: 40px;
      /* 根据图标大小调整 */
    }

    .input-with-icon .icon {
      position: absolute;
      right: 5px;
      /* 根据需要调整 */
      top: 50%;
      transform: translateY(-50%);
      /* 垂直居中 */
      pointer-events: none;
      /* 防止点击图标时触发input的点击事件 */
    }
    /* 添加图标的链接样式 */

    .add-item {
      display: inline-block;
      margin-left: 10px;
      /* 与输入框保持间距 */
      text-decoration: none;
      /* 去除下划线 */
      color: #007bff;
      /* 假设链接颜色为蓝色 */
      /* 其他样式，如字体大小、鼠标悬停效果等 */
    }

    .add-item i {
      font-size: 1.5rem;
      /* 假设您想要图标稍大一些 */
      /* 其他图标样式 */
    }
    /* 根据需要添加其他样式 */

    td{
      vertical-align:middle;
    }
  </style>
</head>

<body>
<script src="/js/jquery.min.js" type="text/javascript"></script>
<div class="lyear-layout-web">
  <div class="lyear-layout-container">

    <!--导入头部信息-->
    <div id="header"></div>
    <script>$("#header").load("/header.html")</script>
    <!--导入左侧菜单栏-->
    <!--左侧导航-->
    <aside class="lyear-layout-sidebar">
      <!-- logo -->
      <div id="logo" class="sidebar-header">
        <a href="main.html"><img src="/images/logo-sidebar.png" title="LightYear" alt="LightYear"/></a>
      </div>
      <div class="lyear-layout-sidebar-scroll">
        <!--导入菜单栏-->
        <!--引入left-menu.html页面中的 th:fragment="leftMenu" 部分代码-->
        <div th:replace="/system/common/left :: leftMenu"></div>
        <div class="sidebar-footer">
          <p class="copyright">Copyright &copy; 2019. <a target="_blank"
                                                         href="http://lyear.itshubao.com">IT书包</a>
            All rights reserved.</p>
        </div>
      </div>
    </aside>
    <!--页面主要内容-->
    <main class="lyear-layout-content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-12">
            <div class="card">
              <div class="card-toolbar clearfix">
                <div th:replace="/system/common/third-menu :: thirdMenu"></div>
                                <a class="btn btn-primary m-r-5" href="/system/menu/add"><i class="mdi mdi-account-plus"></i>添加</a>
                                <a class="btn btn-primary m-r-5" href="javascript:;" onclick="edit('/system/menu/edit')" ><i class="mdi mdi-account-edit"></i>编辑</a>
                                <a class="btn btn-primary m-r-5" href="javascript:;" onclick="del('/system/menu/delete')" ><i class="mdi mdi-account-remove"></i>删除</a>

              </div>
              <div class="card-body">
                <div class="table-responsive">
                  <table class="table table-bordered">
                    <thead>
                    <tr>
                      <th>
                        <label class="lyear-checkbox checkbox-primary">
                          <input type="checkbox" id="check-all"><span></span>
                        </label>
                      </th>
                      <th>菜单名称</th>
                      <th>菜单url</th>
                      <th>菜单icon</th>
                      <th>菜单排序</th>
                      <th>是否按钮</th>
                      <th>是否显示</th>
                      <th>添加时间</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!--遍历一级菜单-->
                    <div th:if="${!#lists.isEmpty(topMenus)}" th:each="topMenu:${topMenus}">
                      <tr>
                        <td style="vertical-align:middle;">
                          <label class="lyear-checkbox checkbox-primary">
                            <input type="checkbox" name="ids[]" th:value="${topMenu.menuId}"><span></span>
                          </label>
                        </td>
                        <td style="vertical-align:middle;"><b>[[${topMenu.menuName}]]</b></td>
                        <td style="vertical-align:middle;">[[${topMenu.url}]]</td>
                        <td align="center"><i style="font-size:22px;" th:class="'mdi '+${topMenu.icon}" th:title="${topMenu.icon}" data-toggle="tooltip"></i></td>
                        <td align="center" style="vertical-align:middle;">[[${topMenu.sort}]]</td>
                        <td style="vertical-align:middle;">
                          <font th:if="${topMenu.isButton == 1}" class="text-success">是</font>
                          <font th:if="${topMenu.isButton == 0}" class="text-info">否</font></td>
                        <td style="vertical-align:middle;">
                          <font th:if="${topMenu.isShow == 1}" class="text-success">是</font>
                          <font th:if="${topMenu.isShow == 0}" class="text-info">否</font></td>
                        <td style="vertical-align:middle;"><font class="text-success">[[${topMenu.createTime}]]</font></td>
                      </tr>

                      <div th:if="${!#lists.isEmpty(secondMenus)}" th:each="secondMenu:${secondMenus}">
                        <div th:if="${secondMenu.parent.menuId == topMenu.menuId}">
                          <!--遍历二级菜单-->
                          <tr>
                            <td style="vertical-align:middle;">
                              <label class="lyear-checkbox checkbox-primary">
                                <input type="checkbox" name="ids[]" th:value="${secondMenu.menuId}"><span></span>
                              </label>
                            </td>
                            <td style="vertical-align:middle;">|----- [[${secondMenu.menuName}]]</td>
                            <td style="vertical-align:middle;">[[${secondMenu.url}]]</td>
                            <td align="center"><i style="font-size:22px;" th:class="'mdi '+${secondMenu.icon}" th:title="${secondMenu.icon}" data-toggle="tooltip"></i></td>
                            <td align="center" style="vertical-align:middle;">[[${secondMenu.sort}]]</td>
                            <td style="vertical-align:middle;">
                              <font th:if="${secondMenu.isButton == 1}" class="text-success">是</font>
                              <font th:if="${secondMenu.isButton == 0}" class="text-info">否</font>
                            </td>
                            <td style="vertical-align:middle;">
                              <font th:if="${secondMenu.isShow == 1}" class="text-success">是</font>
                              <font th:if="${secondMenu.isShow == 0}" class="text-info">否</font>
                            </td>
                            <td style="vertical-align:middle;"><font class="text-success">[[${secondMenu.createTime}]]</font></td>
                          </tr>

                          <!--遍历三级菜单-->
                          <div th:if="${!#lists.isEmpty(thirdMenus)}">
                            <tr th:if="${thirdMenu.parent.menuId == secondMenu.menuId}" th:each="thirdMenu:${thirdMenus}" >
                              <td style="vertical-align:middle;">
                                <label class="lyear-checkbox checkbox-primary">
                                  <input type="checkbox" name="ids[]" th:value="${thirdMenu.menuId}"><span></span>
                                </label>
                              </td>
                              <td style="padding-left:45px;vertical-align:middle;">|-----[[${thirdMenu.menuName}]]</td>
                              <td style="vertical-align:middle;">[[${thirdMenu.url}]]</td>
                              <td align="center"><i style="font-size:22px;" th:class="'mdi '+${thirdMenu.icon}" th:title="${thirdMenu.icon}" data-toggle="tooltip"></i></td>
                              <td align="center" style="vertical-align:middle;">[[${thirdMenu.sort}]]</td>
                              <td style="vertical-align:middle;">
                                <font th:if="${thirdMenu.isButton == 1}" class="text-success">是</font>
                                <font th:if="${thirdMenu.isButton == 0}" class="text-info">否</font>
                              </td>
                              <td style="vertical-align:middle;">
                                <font th:if="${thirdMenu.isShow == 1}" class="text-success">是</font>
                                <font th:if="${thirdMenu.isShow == 0}" class="text-info">否</font>
                              </td>
                              <td style="vertical-align:middle;"><font class="text-success">[[${thirdMenu.createTime}]]</font></td>
                            </tr>
                          </div>
                        </div>
                      </div>
                    </div>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>

        </div>

      </div>
    </main>
    <!--End 页面主要内容-->
  </div>
</div>
<div id="footer"></div>
<script>$("#footer").load("/footer.html")</script>

<script type="text/javascript" src="/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="/js/main.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){

  });

  //解析url调用不同的方法
  function operation(obj){
    let url = $(obj).attr("name");
    //判断如果url中包含edit,调用编辑的方法
    if (url.indexOf("edit(")!==-1){
      url  = url.substring(6,url.length-2);
      edit(url);
      //判断如果url中包含del,调用删除的方法
    }else if(url.indexOf("del(")!==-1){
      url  = url.substring(5,url.length-2);
      del(url);
    }
    else if(url.indexOf("add(")!==-1){
      url  = url.substring(5,url.length-2);
      add(url);
    }
  }
  function del(url){
    if($("input[type='checkbox']:checked").length !== 1){
      showWarningMsg('请选择一条数据进行删除！');
      return;
    }
    var id = $("input[type='checkbox']:checked").val();
    $.confirm({
      title: '确定删除？',
      content: '删除后数据不可恢复，请慎重！',
      buttons: {
        confirm: {
          text: '确认',
          action: function(){
            deleteReq(id,url);
          }
        },
        cancel: {
          text: '关闭',
          action: function(){

          }
        }
      }
    });
  }


  //打开编辑页面
  function edit(url){
    if($("input[type='checkbox']:checked").length !== 1){
      showWarningMsg('请选择一条数据进行编辑！');
      return;
    }
    window.location.href = url + '/' + $("input[type='checkbox']:checked").val();
  }
  //打开添加页面
  function add(url){
    window.location.href = url;
  }
  //调用删除方法
  function deleteReq(id,url){
    $.ajax({
      url:url,
      type:'DELETE',
      data:{id:id},
      success:function(data){
        if(data === "success"){
          showSuccessMsg('菜单删除成功!',function(){
            $("input[type='checkbox']:checked").parents("tr").remove();
          })
        }else{
          showErrorMsg(data);
        }
      },
      error:function(data){
        alert('网络错误!');
      }
    });
  }
</script>
</body>
</html>